<template>
  <basic-container>
    <avue-crud v-bind="bindVal" v-on="onEvent" :permission="permission" :page.sync="page">
      <template slot="menuLeft">
        <!-- 添加 -->
        <el-button
          size="small"
          v-permission="permission.addBtn"
          icon="el-icon-plus"
          type="primary"
          @click="addBtn"
        >新增</el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          size="mini"
          v-permission="permission.editBtn"
          icon="el-icon-edit"
          @click="showDialog(scope.row,'edit')"
          :disabled="webiste.roles == scope.row.typeName"
          type="text"
        >编辑</el-button>
        <el-button
          size="mini"
          v-permission="permission.delBtn"
          :disabled="webiste.roles == scope.row.typeName"
          icon="el-icon-delete"
          @click="showDialog(scope.row,'delete')"
          type="text"
        >删除</el-button>
      </template>
    </avue-crud>
    <my-dialog title="权限设置" width="700px" ref="myDialog" @dialogSubmit="dialogSubmit">
      <el-form :model="dialogForm" ref="dialogForm">
        <el-form-item label="权限名称" prop="roleName" :rules="[{ required:true,message:'请输入权限名称'}]">
          <el-input placeholder="请输入权限名称" v-model="dialogForm.roleName"></el-input>
        </el-form-item>

        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-tree
          :data="treeData"
          show-checkbox
          node-key="unique"
          ref="trees"
          :check-strictly="true"
          :expand-on-click-node="false"
          :check-on-click-node="true"
          :default-expand-all="true"
          :props="defaultProps"
          :default-checked-keys="selectNode"
          @check="checkNode"
        ></el-tree>
      </el-form>
    </my-dialog>
  </basic-container>
</template>

<script>
import myDialog from "components/my-dialog";
import menuUnique from "@/router/common/menuUnique.js";
import menuData from "@/router/common/menu.js";
import webiste from "@/config/website";
export default window.$crudCommon(
  {
    components: { myDialog },
    data() {
      return {
        checkAll: true,
        webiste,
        dialogForm: {
          roleName: "",
        },
        // 选择的节点 unique
        selectNode: [],
        // 节点渲染
        treeData: menuData,
        defaultProps: {
          children: "children",
          label: "label",
        },
        addList: [],
      };
    },
    mounted() {
      this.addList = menuUnique;
    },
    methods: {
      addBtn() {
        this.$refs.myDialog.open();
        this.type = { name: "add" };
        this.$nextTick(() => {
          this.$refs.trees.setCheckedKeys(this.addList, true);
          this.selectNode = this.addList;
        });
      },
      // 全选
      handleCheckAllChange() {
        if (this.checkAll) {
          this.$refs.trees.setCheckedKeys(this.addList, true);
          this.selectNode = this.addList;
        } else {
          this.$refs.trees.setCheckedKeys(["0"], false);
          this.selectNode = ["0"];
        }
      },

      // 节点选择
      checkNode(val, list) {
        this.selectNode = list.checkedKeys;
      },

      showDialog(row, type) {
        if (type == "delete") {
          console.log("删除", row.permission);
          this.$confirm("确定删除该权限吗?", "权限删除", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.api.del({ id: row.id }).then(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getList();
              });
            })
            .catch(() => {});
          return;
        }
        this.type = {
          name: type,
          id: row.id,
        };
        this.dialogForm.roleName = row.typeName;
        this.$refs.myDialog.open();
        let checkEnds = [];
        if (typeof row.permission != "string") {
          checkEnds = JSON.parse(row.permission);
        } else {
          checkEnds = row.permission;
        }

        this.checkAll = checkEnds.length == this.addList.length;
        this.$nextTick(() => {
          this.$refs.trees.setCheckedKeys(checkEnds, true);
          this.selectNode = checkEnds;
        });
      },

      dialogSubmit() {
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            if (this.type.name == "add") {
              if (this.selectNode.length == 0) {
                return this.$message({
                  type: "error",
                  message: "请最少选择一个页面才能添加!",
                });
              }
              this.api
                .add({
                  typeName: this.dialogForm.roleName,
                  permission: this.selectNode,
                })
                .then(() => {
                  this.$message({
                    type: "success",
                    message: "添加成功!",
                  });
                  this.getList();
                })
                .finally(() => {
                  this.$refs.myDialog.close();
                });
            } else {
              this.api
                .update({
                  typeName: this.dialogForm.roleName,
                  permission: this.selectNode,
                  id: this.type.id,
                })
                .then(() => {
                  this.$message({
                    type: "success",
                    message: "修改成功!",
                  });
                  this.getList();
                })
                .finally(() => {
                  this.$refs.myDialog.close();
                });
            }
          }
        });
      },
    },
  },
  {
    name: "permission/index", //模块名字
    list: "list", //列表接口名字
    update: "update", //更新接口名字
    add: "add", //新增接口名字
    del: "del", //删除接口名字
    rowKey: "id", //主键
    pageNumber: "pageNumber", //页码
    pageSize: "pageSize", //页数
    res: (data) => ({ data: data.data.list, total: data.data.total }), //列表的结构
    total: "total", //总页数
    data: "data", //列表属性
    role: {
      addBtn: "top-permission-1-addBtn",
      editBtn: "top-permission-1-editBtn",
      delBtn: "top-permission-1-delBtn",
    },
  }
);
</script>
<style lang="scss" scoped>
/deep/ .el-dialog {
  .el-dialog__body {
    height: 500px;
    overflow-y: auto;
  }
}
/deep/ .el-tree-node__children {
  .el-tree-node__children {
    display: flex;
    .el-tree-node__children {
      display: flex;
    }
  }
}
</style>